<template>
    <div class="teamplate-paymentMethodPast">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="">开始日期：</label>
                        <input type="text" class="form-control start-date" id="j_startDate">
                    </div>
                    <div class="form-group">
                        <label class="">结束日期：</label>
                        <input type="text" class="form-control end-date" id="j_endDate">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" @click="onInquiry">查询</button>
                    </div>
                    <div class="btn-group pull-right">
                        <button  type="botton"  class="btn btn-default"  @click="onExport"> 导出表格</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="item-bd">
                        <div class="table-wrap item">
                            <div class="table-box">
                                <table class="table table-striped">
                                    <tbody>
                                        <tr>
                                            <th class="tl">收款方式编号</th>
                                            <th class="tl">收款方式名称</th>
                                            <th class="tr">实收金额</th>
                                            <th style="text-align:right">收款金额</th>
                                            <th style="text-align:right">找零</th>
                                            <th style="text-align:right">抹零</th>
                                        </tr>
                                        <tr v-for="(item,index) in lists.data">
                                            <td>{{item.jsfsbh}}</td>
                                            <td>{{item.jsfsmch }}</td>
                                            <td class="tr">{{item.sshje |nums}}</td>
                                            <td class="tr">{{item.shkje |nums}}</td>
                                            <td class="tr">{{item.zhaol |nums}}</td>
                                            <td class="tr">{{item.moling |nums}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="b-balance clearfix has-border">
                                <div class="pull-left">应收金额： {{lists.summary.ysje}}</div>
                                <div class="pull-left pink">实收金额：{{lists.summary.sshje}}</div>
                                <div class="pull-left">收款金额： {{lists.summary.shkje}}</div>
                                <div class="pull-left">抹零合计： {{lists.summary.moling}}</div>
                                <div class="pull-left">找零合计： {{lists.summary.zhaol}}</div>
                            </div>
                            <div class="pager-box clearfix">
                                <div class="pull-left">共计
                                    <span class="blue">{{lists.count}}</span>条信息 
                                    </div>
                                <div class="pull-right">
                                    <div id="pagenav8" class="tcdPageCode"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                lists: {
                    data: [],
                    summary: {},
                    count: '',
                },
                fdbs: '',
                title:'往日收款方式汇总'
            }
        },
        filters: {
            nums: info => {
                return info.toFixed(2);
            }
        },
        methods: {
            onInquiry(e) { //查询所有接口
                let me = this;
                let res = {
                    fdbs: localStorage.getItem('fdbs'),
                    startDate: $('#j_startDate').val(),
                    endDate: $('#j_endDate').val(),
                }
                me.service.selectSKFSHZ(me, res, data => {
                    me.lists.data = data.data.lists;
                    if (data.data.lists.length > 0) {
                        me.lists.summary = data.data.sum;
                    }

                })
            },
            onExport(e) {
                let me = this;
                var downloadToken = +new Date();
                var _self = this;
                var url = me.cfg.api + '/WRLSController/selectSKFSHZDY?file=' + me.title + '&title=' + me.title + '&fdbs=' + me.fdbs + '&startDate=' + $('#j_startDate').val() + '&endDate=' + $('#j_endDate').val();
                var obj = {
                    time: downloadToken,
                    url: url,
                    _self: _self,
                }
                exportExcelForm(obj);
            },
        },
        mounted() {
            let me = this;
            me.fdbs = localStorage.getItem("fdbs");
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                })
                return;
            }
            let res = {
                pageName: 'MXLS_SHOW',
                sktid: localStorage.getItem('sktId')
            }

            let winHeight = $(window).outerHeight();
            if (winHeight <= 768) {
                me.row = 14
            } else if (winHeight <= 800) {
                me.row = 16
            } else if (winHeight <= 863) {
                me.row = 20
            } else {
                me.row = 22
            }

            $(".start-date,.end-date").datetimepicker({
                language: "zh-CN",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd"
            });

            let time = new Date();
            let startTimes = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + '01'; //默认开始日期
            let endTimes = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + me.util.string.numFix(time.getDate()); //默认结束日期
            $('#j_startDate').val(startTimes);
            $('#j_endDate').val(endTimes);
            me.onInquiry();
        }
    }
</script>